import React from 'react';
import BpmnViewer from 'bpmn-js';
import {
  message, Card, Col, Row, Tag, Descriptions,
} from 'antd';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'assets/css/bpmn.css';
import { historyStatus } from 'services/history';
import { defaultRejectHandler } from 'utils/http';
import history from '../../history';

const { Item } = Descriptions;

export default class BpmnInteract extends React.Component {
  constructor() {
    super();
    this.canvas = null;
    this.viewer = null;
    this.state = {
      executionTasks: [],
      status: null,
    };
  }

  componentDidUpdate(prevProps) {
    const { bpmnXml } = this.props;
    if (prevProps.bpmnXml !== bpmnXml) {
      this.updateBpmn();
      this.timer = setInterval(() => this.updateBpmn(), 2000);
    }
  }

  componentWillUnmount() {
    if (this.timer) { clearInterval(this.timer); }
  }

  updateBpmn = () => {
    const { bpmnXml, id } = this.props;
    const { executionTasks, status } = this.state;
    historyStatus({ params: { historyId: id } }).then((data) => {
      if (executionTasks !== data.executionTasks) {
        this.loadBpmn(bpmnXml, data.taskStatus);
        this.setState({
          executionTasks: data.taskStatus,
          status: data.status,
        });
      }
      if (status === 1) { clearInterval(this.timer); }
    },
    (data) => {
      console.error(data.message);
      history.push('/');
    });
  }


   loadBpmn = (dataSource, taskStatus) => {
     if (this.viewer === null) {
       this.viewer = new BpmnViewer({
         container: '#canvas',
       });
     }
     this.viewer.importXML(dataSource, (err) => {
       if (err) {
         message.error('error rendering', err);
       } else {
         this.canvas = this.viewer.get('canvas');
         // zoom to fit full viewport
         this.canvas.zoom('fit-viewport');
         taskStatus.forEach((item) => {
           if (Object.values(item)[0] === 1) this.canvas.addMarker(Object.keys(item)[0], 'highlight');
         });
       }
     });
     const eventBus = this.viewer.get('eventBus');
     eventBus.on('element.click', (e) => {
       if (e.element.type === 'bpmn:Task' || e.element.type === 'bpmn:UserTask') {
         // 向chart组件传递服务id
         const { setChosenId } = this.props;
         setChosenId(e.element.id);
         // 锚点跳转
         document.getElementById('chart').scrollIntoView();
       }
     });
   }


   render() {
     const { name } = this.props;
     const { executionTasks, status } = this.state;
     const extra = status === 0 ? <Tag color="green">运行中</Tag> : <Tag color="blue">已完成</Tag>;
     // const text = status === 0 ? `流程已执行到${executionTask}` : '流程已执行完';
     const list = executionTasks.map((item) => {
       const taskStatus = ['队列中', '处理中', '已完成', '异常'];
       return (
         <Item label={Object.keys(item)[0]} key={Object.keys(item)[0]} span={3}>
           {taskStatus[Object.values(item)[0]]}
         </Item>
       );
       // return <Item label={key} key={key}>{taskStatus[executionTasks[key]]}</Item>;
     });
     return (
       <>
         <Row gutter={30}>
           <Col span={8}>
             <Card
               hoverable
               style={{ height: '280px' }}
               title={`流程名称:${name}`}
               extra={extra}
             >
               <Descriptions column={3}>
                 {list}
               </Descriptions>
             </Card>
           </Col>
           <Col span={16}>
             <Card style={{ height: '280px' }} hoverable>
               <div id="canvas" style={{ height: '280px' }} />
             </Card>
           </Col>
         </Row>
       </>
     );
   }
}
